.animated {
  animation-timing-function: ease;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  &.rotate {
    animation-name: rotate;
  }
  &.rotate-quarter {
    animation-name: rotate-quarter;
  }
  &.rotate-quarter-show {
    animation-name: rotate-quarter, opacity-show;
  }
  &.rotate-reverse {
    animation-name: rotate-reverse;
  }
  &.rotate-reverse-show {
    animation-name: rotate-reverse, opacity-show;
  }
  &.rotate-quarter-reverse {
    animation-name: rotate-quarter-reverse;
  }
  &.rotate-quarter-reverse-show {
    animation-name: rotate-quarter-reverse, opacity-show;
  }
  &.rotate-quarter-more {
    animation-name: rotate-quarter-more;
  }
  &.scale-to-normal {
    animation-name: scale-to-normal;
  }
  &.transform-up-normal {
    animation-name: transform-up-normal;
  }
  &.translate-x-left {
    animation-name: translate-x-left;
  }
  &.translate-x-rotate-left {
    animation-name: translate-x-rotate-left;
  }
  &.translate-y-up {
    animation-name: translate-y-up;
  }
  &.translate-x-right {
    animation-name: translate-x-right;
  }
  &.translate-y-down {
    animation-name: translate-y-down;
  }
  &.move-entry {
    animation-name: move-entry;
  }
  &.move-entry-reverse {
    animation-name: move-entry-reverse;
  }
  &.move-leave {
    animation-name: move-leave;
  }
  &.move-leave-reverse {
    animation-name: move-leave-reverse;
  }
  &.linear {
    animation-timing-function: linear;
  }
  &.infinite {
    animation-iteration-count: infinite;
  }
  &.pause {
    animation-play-state: paused;
  }
  &.duration-long {
    animation-duration: 1.5s;
  }
  &.duration-longer {
    animation-duration: 2s;
  }
  &.duration-longest {
    animation-duration: 3s;
  }
  &.delay-100 {
    animation-delay: 100ms;
  }
  &.delay-200 {
    animation-delay: 200ms;
  }
  &.delay-300 {
    animation-delay: 300ms;
  }
  &.delay-400 {
    animation-delay: 400ms;
  }
  &.delay-500 {
    animation-delay: 500ms;
  }
  &.delay-600 {
    animation-delay: 600ms;
  }
  &.delay-700 {
    animation-delay: 700ms;
  }
  &.delay-800 {
    animation-delay: 800ms;
  }
  &.delay-900 {
    animation-delay: 900ms;
  }
  &.delay-1000 {
    animation-delay: 1000ms;
  }
  &.delay-1100 {
    animation-delay: 1100ms;
  }
  &.delay-1200 {
    animation-delay: 1200ms;
  }
  &.delay-1300 {
    animation-delay: 1300ms;
  }
  &.delay-1400 {
    animation-delay: 1400ms;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-quarter {
  from {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes rotate-quarter-more {
  from {
    transform: rotate(-90deg);
  }

  to {
    transform: rotate(3deg);
  }
}

@keyframes rotate-reverse {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

@keyframes rotate-quarter-reverse {
  from {
    transform: rotate(90deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes scale-to-normal {
  from {
    opacity: 0;
    transform: scale(0.2, 0.2);
  }
  to {
    opacity: 1;
    transform: scale(1, 1);
  }
}

@keyframes transform-up-normal {
  0% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(60px);
  }
  100% {
    transform: translateY(10px);
  }
}

@keyframes translate-x-left {
  from {
    opacity: 0;
    transform: translateX(750px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes translate-x-rotate-left {
  from {
    opacity: 0;
    transform: translateX(750px) rotate(0deg);
  }

  to {
    opacity: 1;
    transform: translateX(0px) rotate(360deg);
  }
}

@keyframes translate-y-up {
  from {
    opacity: 0;
    transform: translateY(2000px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes translate-x-right {
  from {
    opacity: 0;
    transform: translateX(-750px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes translate-y-down {
  from {
    opacity: 0;
    transform: translateY(-2000px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes opacity-show {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes move-entry {
  0% {
    transform: translateX(-120%) scale(1, 1);
  }

  20% {
    transform: translateX(-120%) scale(1.1, 1.1);
  }

  80% {
    transform: translateX(0px) scale(1.1, 1.1);
  }

  100% {
    transform: translateX(0px) scale(1, 1);
  }
}

@keyframes move-leave {
  0% {
    transform: translateX(0px) scale(1, 1);
  }

  20% {
    transform: translateX(0%) scale(1.1, 1.1);
  }

  80% {
    transform: translateX(-120%) scale(1.1, 1.1);
  }

  100% {
    transform: translateX(-120%) scale(1, 1);
  }
}

@keyframes move-entry-reverse {
  0% {
    transform: translateX(120%) scale(1, 1);
  }

  20% {
    transform: translateX(120%) scale(1.1, 1.1);
  }

  80% {
    transform: translateX(0px) scale(1.1, 1.1);
  }

  100% {
    transform: translateX(0px) scale(1, 1);
  }
}

@keyframes move-leave-reverse {
  0% {
    transform: translateX(0px) scale(1, 1);
  }

  20% {
    transform: translateX(0px) scale(1.1, 1.1);
  }

  80% {
    transform: translateX(120%) scale(1.1, 1.1);
  }

  100% {
    transform: translateX(120%) scale(1, 1);
  }
}